<template>
  <div class="body">
    <div class="side">
      <div class="top">
      <span class="logo">
        K
      </span>
        <span>软件组主页</span>
      </div>
      <ul>
        <li :class="url=='/home'?'active':''">
          <tiny-icon-share></tiny-icon-share>
          <router-link to="/home">软件首页</router-link>
        </li>
        <li :class="url=='/workManage'?'active':''">
          <tiny-icon-del></tiny-icon-del>
          <router-link to="/workManage">任务管理</router-link>
        </li>
         <li :class="url=='/notice'?'active':''">
          <tiny-icon-icon-public-notice></tiny-icon-icon-public-notice>
          <router-link to="/notice">通知管理</router-link>
        </li>
        <li :class="url=='/profile'?'active':''">
          <tiny-icon-writing></tiny-icon-writing>
          <router-link to="/profile">个人主页</router-link>
        </li>
        <li :class="url=='/resource'?'active':''">
          <tiny-icon-ascending></tiny-icon-ascending>

          <router-link to="/resource">资源宝库</router-link>
        </li>
        <li :class="url=='/member'?'active':''">
          <tiny-icon-clock-work></tiny-icon-clock-work>
          <router-link to="/member">人员管理</router-link>
        </li>
          <li>

          <tiny-icon-icon-commission></tiny-icon-icon-commission>
          <router-link to="/">竞赛入口</router-link>
        </li>
      </ul>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>

  </div>
</template>

<script setup>

import {ref, computed} from 'vue'
import {useRoute} from "vue-router";

const route = useRoute()
import {
  IconEditorAlignRight,
  IconStatistics,
  IconUser,
  IconLanguage,
  IconVersiontree,
    IconCommission,
    IconPublicNotice
} from '@opentiny/vue-icon'

const url = computed(() => {
  return route.path
})

const TinyIconShare = IconEditorAlignRight()
const TinyIconDel = IconStatistics()
const TinyIconWriting = IconUser()
const TinyIconAscending = IconLanguage()
const TinyIconClockWork = IconVersiontree()
const TinyIconIconCommission = IconCommission()
const TinyIconIconPublicNotice = IconPublicNotice()

</script>

<style scoped lang="less">
.body {
  display: flex;
  justify-content: center;
  height: 100vh;

  .side {
    width: 170px;
    padding: 20px;

    .top {
      display: flex;
      justify-content: flex-start;

      .logo {
        width: 25px;
        height: 25px;
        display: block;
        border-radius: 50%;
        background-color: #096dd9;
        color: #ffffff;
        font-size: 14px;
        line-height: 25px;
        margin-right: 10px;
        text-align: center;
      }

      span {
        display: block;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
      }
    }

    ul {
      width: 100%;
      padding-right: 10px;

      li {
        list-style: none;
        display: flex;
        justify-content: space-between;
        width: 90px;
        margin: 25px 0;

      }
    }
  }

  .main {
    flex: 1;
    background-color: #F2F6FC;

  }
}

.tiny-svg {
  fill: #A8ABB2;
  transform: translateY(3px);
  vertical-align: middle;
}

.active .tiny-svg {
  fill: #4191EEFF;
  transform: translateY(3px);
  vertical-align: middle;
}

.active a {
  color: #4191EEFF !important;
}

a {
  text-decoration: none;
  font-size: 13px;
  color: #A8ABB2;
}

</style>